<template>
  <view class="product-list-wrapper" v-for="(item, index) in items" :key="index" @click="proxy.$util.navigateTo('/pages/product/product', { id: item.product_id })" v-if="items.length">
    <image class="image" :src="item.image" mode="widthFix" lazy-load="true" style="background-color: #eeeeee" />
    <view class="info">
      <view class="name">{{ item.product_name }}</view>
      <view class="item-wrapper">
        <text class="price-new">{{ item.price }}</text>
        <view class="remove" @click.stop="remove(item.id, index)">
          <uni-icons type="trash" size="18"></uni-icons>
        </view>
      </view>
    </view>
  </view>
  <no-item v-if="items && !items.length"></no-item>
</template>

<script setup>
const { proxy } = getCurrentInstance()

const items = ref([])

onShow(e => {
  loadData()
})

const loadData = () => {
  proxy.$http.get('wishlists').then(res => {
    items.value = res
  })
}

const remove = (id, index) => {
  proxy.$http.del(`wishlists/${id}`).then(res => {
    items.value.splice(index, 1)
  })
}
</script>

<style lang="scss" scoped>
@import './index';
</style>
